
<template>
  <div class="progress-wrap">
    <header class="clearfix">
      <div class="fl">
        <p>号牌号码：{{carInfo.carNum}}</p>
        <p>提交时间：{{carInfo.dates}}</p>
      </div>
      <div class="fr">
        <p>已用时</p>
        <p>01:13:48</p>
      </div>
    </header>
    <div class="box">
      <div class="steps-box">
        <div
          v-for="(item,index) in list"
          :key="item.updateTime"
          class="steps"
          :class="{lastChild:index === list.length-1}"
        >
          <div v-if="item.status === 1">
            <div class="time">
              <span>{{item.updateTime}}</span>
            </div>
            <div class="text">
              <span>{{item.name}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn">
      <button>服务评价</button>
    </div>
  </div>
</template>

<script>
import { getDate } from '@/utils/index'
export default {
  name: 'progress',
  data() {
    return {
      list: [
        {
          id: 19,
          orderId: 7,
          step: 10,
          name: '提交申请',
          status: 1,
          userId: 11,
          sysUserId: 9999999,
          createTime: 1583604874000,
          updateTime: 1583604874000
        },
        {
          id: 19,
          orderId: 7,
          step: 10,
          name: '提交申请',
          status: 1,
          userId: 11,
          sysUserId: 9999999,
          createTime: 1583604874000,
          updateTime: 1583604874000
        },
        {
          id: 20,
          orderId: 7,
          step: 25,
          name: '线上支付',
          status: 0,
          userId: 11,
          sysUserId: null,
          createTime: 1583604874000,
          updateTime: 1583604874000
        }
      ],
      carInfo: {}
    }
  },
  created() {
    if (!this.$route.params.carInfo) {
      this.$router.go(-1)
    } else {
      this.carInfo = this.$route.params.carInfo
      this.carInfo.dates = getDate(this.carInfo.updateTime).o
      console.log(this.$route.params.carInfo)
      this.queryOrderStep(this.carInfo.id)
    }
  },
  mounted() {
    document.getElementsByTagName('html')[0].style.backgroundColor = '#f5f6f5'
  },
  methods: {
    // 车检进度查询
    async queryOrderStep(ids) {
      let { data } = await this.$api.queryOrderStep({ orderId: ids })

      this.list = data.list.map(el => {
        el.updateTime = this.getDates(el.updateTime, 'hh:mm')
        return el
      })

      console.log(data, '------------------- 车检进度查询 ----------------')
    },
    getDates(time, str) {
      Date.prototype.Format = function(fmt) {
        // author: meizz
        var o = {
          'M+': this.getMonth() + 1, // 月份
          'd+': this.getDate(), // 日
          'h+': this.getHours(), // 小时
          'm+': this.getMinutes(), // 分
          's+': this.getSeconds(), // 秒
          'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
          S: this.getMilliseconds() // 毫秒
        }
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            (this.getFullYear() + '').substr(4 - RegExp.$1.length)
          )
        for (var k in o)
          if (new RegExp('(' + k + ')').test(fmt))
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length == 1
                ? o[k]
                : ('00' + o[k]).substr(('' + o[k]).length)
            )
        return fmt
      }

      let date = new Date(time).Format(str)

      return date
    }
  },
  beforeRouteLeave(to, from, next) {
    document.getElementsByTagName('html')[0].style.backgroundColor = '#fff'
    next()
  }
}
</script>

<style lang="less" scoped>
.progress-wrap {
  counter-reset: step; /*创建步骤数字计数器*/
  header {
    width: 96%;
    height: 1.76rem;
    background: linear-gradient(to right, #fd7d10, #fda158);
    border-radius: 0.32rem;
    margin: 0.187rem auto 0;
    .fl {
      font-size: 0.427rem;
      color: #fff;
      line-height: 0.72rem;
      padding-left: 0.307rem;
      padding-top: 0.133rem;
    }
    .fr {
      width: 2.133rem;
      height: 1.2rem;
      border: 0.027rem solid #fff;
      border-radius: 0.187rem;
      margin-top: 0.28rem;
      margin-right: 0.307rem;
      p {
        line-height: 0.587rem;
        font-size: 0.4rem;
        color: #fff;
        text-align: center;
      }
    }
  }
  .btn {
    width: 100%;
    position: absolute;
    bottom: 8%;
  }
  button {
    width: 90%;
    height: 1.067rem;
    line-height: 1.067rem;
    text-align: center;
    font-size: 0.56rem;
    color: #fff;
    margin: 0 auto;
    display: block;
    border: 0;
    background-color: #fd4b05;
  }
  .box {
    width: 100%;
    height: 70%;
    position: absolute;
    top: 2.133rem;
    left: 0;
    overflow: hidden;
  }
  .steps-box {
    width: 96%;
    height: 100%;
    margin: 0 auto;
    padding: 0.8rem 0;
    background-color: #faf6f5;
    border-radius: 0.32rem;
    .steps {
      position: relative;
      margin-bottom: 0.747rem;

      .time {
        width: 20%;
        height: 0.6rem;
        line-height: 0.6rem;
        span {
          display: block;
          font-size: 0.427rem;
          text-align: center;
          color: #9d9c9a;
          height: 0.6rem;
          line-height: 0.6rem;
        }
      }
      /*步骤描述*/
      .text {
        list-style-type: none;
        text-align: center;
        width: 100%;
        height: 0.6rem;
        line-height: 0.6rem;
        position: absolute;
        top: 0;
        left: 20%;
        span {
          position: absolute;
          top: 0;
          left: 10%;
          font-size: 0.453rem;
        }
      }
      /*步骤数字*/
      .text:before {
        display: block;
        content: counter(step); /*设定计数器内容*/
        counter-increment: step; /*计数器值递增*/
        width: 0.6rem;
        height: 0.6rem;
        background-color: #fd4b05;
        line-height: 0.6rem;
        border-radius: 0.6rem;
        font-size: 0.32rem;
        color: #fff;
        text-align: center;
        font-weight: 700;
      }
      /*连接线*/
      .text:after {
        content: '';
        width: 2px;
        height: 140%;
        background-color: #fd4b05;
        position: absolute;
        left: 0.267rem;
        top: 0.6rem;
        z-index: -1; /*放置在数字后面*/
      }
    }

    .lastChild .text::after {
      display: none;
    }
  }

  // /*将当前/完成步骤之前的数字及连接线变绿*/
  // .steps .text.active:before,
  // .steps .text.active:after {
  //   background-color: #fd4b05;
  // }

  // /*将当前/完成步骤之后的数字及连接线变灰*/
  // .steps .text.active ~ .text:before,
  // .steps .text.active ~ .text:after {
  //   background-color: #777;
  // }
}
</style>